<template>
  <div class="gis-right-drawer">
    <div class="analysis-tool-header">分析工具</div>
    <div class="gis-analysis-item">
      <spatial-statistics />
      <spatial-analysis />
      <nearest-neighbor-analysis />
      <data-conversion v-show="selectLayerType === 'circle'" />
    </div>
  </div>
</template>

<script lang="ts">
/**
 * gis 右侧： 空间分析
 */
import { Component, Vue } from 'vue-property-decorator'
import SpatialAnalysis from '@/components/gis/gis-analysis/analysis-tool/SpatialAnalysis.vue'
import SpatialStatistics from '@/components/gis/gis-analysis/analysis-tool/SpatialStatistics.vue'
import NearestNeighborAnalysis from '@/components/gis/gis-analysis/analysis-tool/NearestNeighborAnalysis.vue'
import DataConversion from '@/components/gis/gis-analysis/analysis-tool/DataConversion.vue'
import GisStore from '@/store/modules/gis'

@Component({
  components: {
    SpatialAnalysis,
    SpatialStatistics,
    NearestNeighborAnalysis,
    DataConversion,
  },
})
export default class GisDrawer extends Vue {
  public get selectLayerType() {
    return GisStore.selectLayer?.type
  }
  public mounted() {}

  public beforeDestroy() {}
}
</script>

<style scoped lang="less">
@import '@/styles/scroll-bar';

.gis-right-drawer {
  background-color: #f9f9fc;
  border-left: 1px solid #e9e9e9;
  height: 100%;
  width: 100%;

  .analysis-tool-header {
    background-color: #fff;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
    color: #5d637e;
    font-size: 14px;
    font-weight: 500;
    height: 38px;
    letter-spacing: 1px;
    line-height: 38px;
    text-align: center;
  }

  .gis-analysis-item {
    height: calc(100% - 38px);
    padding: 16px;
  }
}
</style>
